import { useState } from 'react'
import { Provider } from 'react-redux'
import store from './redux/store'
import TodoList from './components/TodoList'
import ReduxVisualizerPage from './redux-visualizer/ReduxVisualizerPage'
import './App.css'

function App() {
  const [activeTab, setActiveTab] = useState<'todo' | 'redux-visualizer'>('todo')

  return (
    <Provider store={store}>
      <div className="app">
        <header className="app-header">
          <h1>React Redux 应用</h1>
          
          {/* 导航菜单 */}
          <nav className="app-nav">
            <button
              className={`nav-button ${activeTab === 'todo' ? 'active' : ''}`}
              onClick={() => setActiveTab('todo')}
            >
              待办事项应用
            </button>
            <button
              className={`nav-button ${activeTab === 'redux-visualizer' ? 'active' : ''}`}
              onClick={() => setActiveTab('redux-visualizer')}
            >
              Redux 原理可视化
            </button>
          </nav>
        </header>
        
        <main className="app-main">
          {activeTab === 'todo' ? (
            <>
              <p className="app-subtitle">高效管理您的日常任务</p>
              <TodoList />
            </>
          ) : (
            <ReduxVisualizerPage />
          )}
        </main>
        
        <footer className="app-footer">
          <p>© {new Date().getFullYear()} React Redux 应用</p>
        </footer>
      </div>
    </Provider>
  )
}

export default App
